<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Json Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/lightness/jquery-ui-1.8.17.custom.css" />

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 80%;
}
</style>

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
<!--script type="text/javascript" src="js/jquery.jqGrid.min.js"></script-->

<script type="text/javascript">


function addNewRow(){
	jQuery("#staff").jqGrid('addRow',
		{rowID:"new_row",
		initdata:{}, //PersonID:'PersonID',FirstName:'FirstName',LastName:'LastName',Age:'Age'
		postion:"first",
		useDefValues : false,
    	useFormatter : false,
    	addRowParams : {}
		});
};

function deleteRow(){
	jQuery("#staff").jqGrid('delGridRow',"new_row");
};

</script>



</head>

<body>
<p align="center">Staff List</p>
<script type="text/javascript">

jQuery('document').ready(function() {
 var lastsel;
 jQuery("#staff").jqGrid({
	url:'gridjsonfetch.php?q=2',
	datatype:"json",
	mtype: 'GET',
	colNames:['PersonID','FirstName','LastName','Age'],
	colModel:[
		{name:'PersonID',index:'PersonID',width:'60%',align:"center",editable:true},
		{name:'FirstName',index:'FirstName',width:'60%',align:"center",editable:true},
		{name:'LastName',index:'LastName',width:'60%',align:"center",editable:true},
		{name:'Age',index:'Age',width:'60%',align:"center",editable:true}
		],
	rowNum:10,
	rowList:[10,20,30],
	loadonce:true,
	ignoreCase:true,
	pager:"#pager",
	autowidth:true,
	sortname:'PersonID',
	sortorder:'asc',
	height:300,
	viewrecords:true,
	multiselect:true,
	editurl:'gridjsonfetch.php',
	caption: "Staff in Solution Forest",
	
	//for row editing
	ondblClickRow: function(rowid){
		//alert("selected is: "+id);
		
		if(rowid && rowid!==lastsel){
			jQuery('#staff').jqGrid('restoreRow',lastsel);
			jQuery('#staff').jqGrid('editRow',rowid,
				{keys:true,
				oneditfunc:function(){},//alert("start editing");
				url:'update.php',
				succesfunc:updateOnServer
				}
				//function(){alert("edit activated");}//on edit func
			);
			lastsel=rowid;
		}
	}	
 });
 jQuery("#staff").jqGrid('navGrid','#staff',{edit:false,add:false,del:false});
 jQuery("#staff").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
 //jQuery("#staff").jqGrid('inlineNav','#staff');		
});


function updateOnServer()
{alert("Saved succesfully"); 
return true;}//check returned value from server in this function to choose output info




</script>
<div>
<table id ="staff"></table>
<div id="pager"></div>

<input id="add" type="button" size="40px" value="Add" onClick="addNewRow()"/>
<input id="delete" type="button" size="40px"  value="Delete" onClick="deleteRow()"/>

</body>

</html>